<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<style type="text/css">
.outer{
    width: 440px;
    height: 650px;
    background-color: #4ec2e8;
    color: #fff;
    box-shadow:5px 5px 5px #EBEBEB;
    font-size: 16px;
    text-align: center;

}
#dayu{
    position: absolute;
    top: 10px;
    left: 10px;
    font-weight:bolder;
    font-size: 30px;
}
    .top{
        width: 340px;
        height: 320px;
        background-color:#fff;
        border-radius: 10px;
        margin:80px auto;
        color: #000;
    }
    input{
        width: 260px;
        border-bottom-style: solid;
        border-top-width:0px;
        border-bottom-width:2px;
        border-left-width:0px;
        border-right-width:0px;
        border-bottom-color: #d4d3d3;
        margin-bottom: 20px;
    }

    #button-denglu{
        background-color: #456EF0;
        width: 340px;
        height: 40px;
        border:none;
        border-radius: 5px;
    }
    .bottom{
        width: 340px;
        height: 350px;
        background-color:#fff;
        border-radius: 10px;
        margin:60px auto;
        color: #000;

    }
#button-zhuce-queding{
    background-color: #744ebd;
    border-radius: 5px;
    width: 340px;
    height: 40px;
    border:none;
}
#button-zhuce-yanzhengma{
    width: 80px;
    height: 30px;
    background-color: #486AF1;
    font-size: 6px;
    color: #fff;
    border:none;
    border-radius: 5px;
}
    .wangji{
        width: 340px;
        height:340px;
        background-color:#fff;
        border-radius: 10px;
        margin:60px auto;
        color: #000;
    }
#button-chongzhi-queding{
    background-color: #456EF0;
    border-radius: 5px;
    width: 340px;
    height: 40px;
    border:none;
}
 #button-chongzhi-yanzhengma{
     width: 80px;
     height: 30px;
     background-color: #486AF1;
     font-size: 6px;
     color: #fff;
     border:none;
     border-radius: 5px;
 }
</style>
<body>
<div class="outer" style="position:relative;margin:0 auto;"  >
    <span id="dayu"> < </span><br/>
   <span >账号密码登录</span>
   <!--div>
    <div class="top">
        <h4 style="padding-top: 10px;">账号密码登录</h4><br/><br/>
        <div><img src="img/nicheng.gif">
         <input class="first-name"  id="input-zhanghao"  type="text" placeholder="用户名/邮箱/手机号">
        </div><br/>
        <div><img src="img/mima1.gif">
         <input class="first-name" style="width: 235px;" id="input-mima" type="password" placeholder="请输入你的密码">
            <img src="img/xianshi1.gif">
        </div><br/><br/><br/>
        <a href="#">忘记密码？</a>
    </div>
      <button type="button" id="button-denglu"  >登录</button>
    </div>

    <div>
      <div class="bottom">
        <h4 style="padding-top: 10px;">快速注册</h4><br/>
          <div><img src="img/nicheng.gif">
              <input class="first-name"   type="text" placeholder="请输入你的昵称">
          </div>
          <div><img src="img/shouji.gif">
          <input class="first-name"  style="width: 175px;" type="text" placeholder="请输入手机号">
          <button type="button" id="button-zhuce-yanzhengma">获取验证码</button>
          </div>
          <div><img src="img/yanzhengma.gif">
          <input class="first-name"   type="text" placeholder="请输入收到的验证码"></div>
              <div><img src="img/mima1.gif">
          <input class="first-name" style="width: 235px;"  type="text" placeholder="请设置一个6-20你的密码">
                  <img src="img/xianshi1.gif">
                  </div>
                  <div><img src="img/mima2.gif">
          <input class="first-name"  style="width: 235px;" type="text" placeholder="请再次输入你的密码">
                      <img src="img/xianshi2.gif">
                      </div><br/>
          <div style="font-size: 12px;"><img src="img/tongyi.gif">
          我已经阅读并同意《使用条款和协议》
          </div>
      </div>
        <button type="button" id="button-zhuce-queding"  >确定</button>
    </div-->
    <div>
    <div class="wangji" >
        <h4 style="padding-top: 10px;">重置密码</h4><br/>
        <div>
            <div><img src="img/shouji.gif">
        <input class="first-name" style="width:175px; "  type="text" placeholder="请输入手机号">
            <button type="button" id="button-chongzhi-yanzhengma">获取验证码</button>
                </div>
                <div><img src="img/yanzhengma.gif">
        <input class="first-name"   type="text" placeholder="请输入收到的验证码">
                </div>
            <div><img src="img/mima1.gif">
        <input class="first-name" style="width:235px; "   type="text" placeholder="请设置一个6-20你的密码">
                <img src="img/xianshi1.gif">
            </div>
                <div><img src="img/mima2.gif">
        <input class="first-name"  style="width:235px; "  type="text" placeholder="请再次输入你的密码">
                    <img src="img/xianshi2.gif">
                </div><br/><br/>
        </div>
        <a href="#" >取消</a>
    </div>
        <button type="button" id="button-chongzhi-queding"  >确定</button>
    </div>
</div >
</body>
</html>